<template>
  <div>
    <h2>parent -2</h2>
    <button @click="changeParent">$parent 去修改父组件</button>
    <button @click="changeShow">方向的props 去修改父组件</button>
    <div>
      <input type="text" name="" id="" @input="changeParentWord" />
    </div>
    <hr />
    <button @click="changeone">事件总线 空的Vue实例对象 修改兄弟组件</button>
    <hr />
    <slot></slot>
    <div class="boxone">
      <slot class="boxone" name="dome"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "child-two",
  props: {
    changeShow: Function,
  },
  methods: {
    changeParent() {
      this.$parent.count += 100;
    },
    changeParentWord(e) {
      this.$emit("changeParentWord", e.target.value);
    },
    changeone() {
      // bus
      this.$bus.$emit("changeone", 30);
    },
  },
};
</script>

<style lang="scss" scoped>
.boxone {
  border: 1px solid darkolivegreen;
}
</style>
